"use client";
import React,{ useState } from "react";
import { ErrorBoundary,useErrorBoundary } from "react-error-boundary";
const MyComponent = () => {
    const [value, setValue] = useState('');
    const { showBoundary } = useErrorBoundary();
    try{
      const handleClick = () => {
        // 这里故意抛出一个错误
        if (value === '') {
          throw new Error('Value cannot be empty');
        }
      }
        useEffect(() => {
            fetchGreeting(name).then(
                response => {
                    // Set data in state and re-render
                },
                error => {
                    // Show error boundary
                    showBoundary(error);
                }
            );
        });
      return (
          <div>
              Error
              <button onClick={handleClick}>Click me 手动触发错误</button>
          </div>
      );
    }catch(error){
        showBoundary(error);
    }
};
const MyComponent2 = () => {
    return (
      <div>另外一个组价</div>
    )
}
const ErrorFallback = ({error, resetErrorBoundary }) => {
  return (
      <div>
        <h1>Something went wrong. 显示错误消息的组件</h1>
        <p>{error.message}</p>
        <button onClick={resetErrorBoundary}>Try again</button>
      </div>
  );
};

const Errors = () => {
  return (
      <>
          <MyComponent2 />
          <ErrorBoundary FallbackComponent={ErrorFallback} >
              <MyComponent />
          </ErrorBoundary>
      </>
  );
};

export default Errors;